{% extends "paned.html" %}
{% load compressed %}

{% block title %} OCRopodium - Convert {% endblock %}

{% block headercss %}
    {% compressed_css 'nodetree' %}
    {% compressed_css 'viewers' %}
{% endblock %}

{% block lateloadscript %}
	<script type='application/javascript' src='/static/js/presets/builder.js'></script>
{% endblock %}

{% block widget %}
    {% compressed_js 'undostack' %}
    {% compressed_js 'viewers' %}
    {% compressed_js 'nodetree' %}
    {% include "includes/node.html" %}
    {% include "includes/preset_manager.html" %}
    <div id="widget" class="ui-layout-center">
        <div  id="widgetheader" class="ui-layout-north ui-header-tabs">
            <ul>
                <li><a href="#imageviewer_1_container">Image Viewer</a></li>
                <li><a href="#hocrviewer_1_container">OCR Viewer</a></li>
                <li><a href="#textviewer_1_container">Text Viewer</a></li>
            </ul>
        </div>
        <div id="widgetcontent" class="ui-layout-center ui-layout-content">
            <div id="imageviewer_1_container" class="ui-layout-center toolpane">
                <div id="imageviewer_1_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
                    <button class="tbbutton" id="image_zoomout">Zoom Out</button>
                    <button class="tbbutton" id="image_zoomin">Zoom In</button>
                    <button class="tbbutton" id="centre">Centre</button>
                    <button class="tbbutton" id="fullscreen">Full Screen</button>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <button class="tbbutton" id="refresh">Refresh</button>
                </div>
                <div id="imageviewer_1" class="ui-layout-center imageviewer ui-background-flat"></div>
            </div>
            <div id="hocrviewer_1_container" class="ui-layout-center toolpane">
                <div id="hocrviewer_1_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
                    <button class="tbbutton" id="hocr_zoomout">Zoom Out</button>
                    <button class="tbbutton" id="hocr_zoomin">Zoom In</button>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <span id="format">
                        <input type="radio" class="tbbutton" id="format_block" name="format" checked="checked" />
                        <label for="format_block">Block</label>
                        <input type="radio" class="tbbutton" id="format_column" name="format" />
                        <label for="format_column">Column</label>
                    </span>
                </div>
                <div id="hocrviewer_1" class="ui-layout-center textviewer"></div>
            </div>
            <div id="textviewer_1_container" class="ui-layout-center toolpane">
                <div id="textviewer_1_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
                    <button class="tbbutton" id="text_zoomout">Zoom Out</button>
                    <button class="tbbutton" id="text_zoomin">Zoom In</button>
                </div>
                <div id="textviewer_1" class="ui-layout-center textviewer"></div>
            </div>
        </div>            
    </div>
{% endblock %}


{% block sidebarheader %}
    Preset editor: <span id="current_preset_name">Untitled 1</span><span id="preset_unsaved">*</span>
{% endblock sidebarheader %}

{% block sidebarcontent %}
    <div id="node_canvas" class="ui-helper-reset ui-widget ui-layout-center ui-background-flat"></div>
    <div id="parameters" class="ui-layout-south node_parameters ui-medium-flat">
        <form id="optionsform">
            <h1>No Node Selected</h1>
        </form>
    </div>

    <!-- NB. This is lower down in the DOM than the parameters, despite
     being positioned above.  It is so the menu overlaps the params
     where necessary -->
    <div id="script_toolbar" class="ui-layout-north viewer_toolbar ui-medium-flat ui-helper-clearfix">
        <div class="dropdownmenu dropdown">
            <ul class="top">
                <a id="show_file_menu" class="ui-helper-clearfix">Show File Menu</a>
                <li>
                    <ul id="file_menu" class="ui-helper-hidden">
                        <li><a href="#" id="new_script">New...</a></li>
                        <li><a href="#" id="open_script">Open Script</a></li>
                        <li><a href="#" id="save_script">Save</a></li>
                        <li><a href="#" id="save_script_as">Save as...</a></li>
                        <li><a href="#" id="download_script">Export</a></li>
                        <li><a href="#" id="close_script">Close</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button id="undo_command" disabled="disabled">Undo</button>
        <button id="redo_command" disabled="disabled">Redo</button>
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button id="stop_refresh">Rerun</button>
        <button id="focus_script">Home</button>
        <button id="layout_nodes">Cleanup Node Layout</button>
        <button id="clear_cache">Clear Cache</button>
        <button id="focus_dummy"></button>
        {% if doc %}
        <span>&nbsp;&nbsp;&nbsp;</span>
        <button id="save_task_preset">Save</button>
        <button id="cancel_task_preset">Cancel</button>
        {% endif %}
    </div>                


    <div class="ui-helper-hidden" id="hidden_items">
        <div id="dialog"></div>
        <form id="taskdetailsform">
            <input type="hidden" id="page_pid" name="page_pid" value="{{doc.pid}}" />
            <input type="hidden" id="page_name" name="page_name" value="{{doc.label}}" />
            <input type="hidden" id="page_script" name="page_script" value="{{scriptdata}}" />
        </form>
        {% if doc %}
        <!-- form for POSTing updated task scripts -->
        <form id="task_update_form" action="/ocr/update_task/{{doc.pid}}/" method="POST">
            {{csrf_token}}
            <input type="hidden" id="task_update_script" name="script" value="" />
            <input type="hidden" id="task_update_ref" name="ref" value="{{ref}}" />
        </form>
        {% endif %}
        <!-- form for downloading scripts... this is a bit of a hack. -->
        <form id="fetch_script" method="POST" action="/presets/fetch/" >
            <input name="name" type="hidden" id="fetch_script_slug" />
            <input name="script" type="hidden" id="fetch_script_data" />
        </form>
        <div class="ui-helper-hidden" id="preset_dialogs">
            <div class="preset_error" id="preset_error">
                <ul id="preset_errors"></ul>
            </div>
            <div class="preset_dialog" id="create_preset">    
                <form method="POST" action="/presets/create/" id="new_preset_form">
                    <fieldset>
                        <legend>New OCR Preset</legend>
                        {% for field in form.visible_fields %}
                            <div class="field_wrapper">
                                {{ field.label_tag }}
                                {{ field }}
                                {{ field.errors}}
                            </div>
                        {% endfor %}
                        {% for field in form.hidden_fields %}
                            {{ field }}
                        {% endfor %}
                    </fieldset>
                    <div class="buttons">
                        <button id="cancel_dialog">Cancel</button>
                        <input type="submit" disabled="disabled" id="submit_create_new" value="Save" />
                    </div>
                </form>
            </div>
            <div class="preset_dialog"  id="open_preset">    
                <div id="filter_box" class="field_wrapper">
                    <input type="text" id="filter_presets" />
                </div>
                <ul id="open_preset_list">
                    {% for preset in presets %}
                    <li class="preset_item" id="preset_{{forloop.counter}}" title="{{preset.description}}"
                            data-slug="{{preset.slug}}" data-tags="{{preset.tags}}">
                        {{preset.name}}
                    </li>
                    {% endfor %}
                </ul>
                <div class="buttons">
                    <button id="cancel_dialog">Cancel</button>
                    <input type="submit" disabled="disabled" id="submit_open_preset" value="Open" />
                </div>
            </div>
            <div class="preset_dialog"  id="unsaved_preset">    
                <div>Do you want to update this preset or save under a different name?</div>
                <div class="buttons">
                    <button id="submit_close_without_saving">Discard</button>
                    <button id="submit_save_script">Save Changes</button>
                    <button id="submit_save_script_as">Save Script as...</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
